'use strict';

var gui = new dat.GUI(),
    guiSet = {
	frequency: 60,
	reset: function reset() {
		obj.reset();
	}
};
gui.add(guiSet, 'frequency').min(10).max(50);
gui.add(guiSet, 'reset');

//

var obj = {};

/*========================================
Utility
========================================*/

obj.PI = Math.PI;
obj.TAU = obj.PI * 2;

obj.rand = function (min, max) {
	if (!max) {
		var max = min;
		min = 0;
	}

	return Math.random() * (max - min) + min;
};

/*========================================
Initialize
========================================*/

obj.init = function () {
	obj.c = document.querySelector('canvas');
	obj.ctx = obj.c.getContext('2d');
	obj.simplex = new SimplexNoise();
	obj.events();
	obj.reset();
	obj.loop();
};

/*========================================
Reset
========================================*/

obj.reset = function () {
	obj.w = window.innerWidth;
	if (obj.w < 1200) {
		obj.w = 1200
	}
	obj.h = window.innerHeight * 0.8;
	obj.cx = obj.w / 2;
	obj.cy = obj.h / 2;
	obj.c.width = obj.w;
	obj.c.height = obj.h;

	obj.count = Math.floor(obj.w / guiSet.frequency); // Wave frequency
	obj.xoff = 0;
	obj.xinc = 0.05;
	obj.yoff = 0;
	obj.yinc = 0.0025; // Speed
	obj.goff = 0;
	obj.ginc = 0;
	obj.y = obj.h * 0.8;
	obj.length = obj.w + 0;
	obj.amp = 105; // Wave height
};

/*========================================
Event
========================================*/

obj.events = function () {
	window.addEventListener('resize', obj.reset.bind(undefined));
};

/*========================================
Wave
========================================*/

obj.wave = function (color, amp, height, comp) {
	obj.ctx.beginPath();
	var sway = obj.simplex.noise2D(obj.goff, 0) * amp;

	for (var i = 0; i <= obj.count; i++) {
		obj.xoff += obj.xinc;
		var x = obj.cx - obj.length / 2 + obj.length / obj.count * i;
		var y = height + obj.simplex.noise2D(obj.xoff, obj.yoff) * amp + sway;
		obj.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
	}

	obj.ctx.lineTo(obj.w, -obj.h); // -obj.h - Vertically reflection
	obj.ctx.lineTo(0, -obj.h); // -obj.h - Vertically reflection
	obj.ctx.closePath();
	obj.ctx.fillStyle = color;

	if (comp) {
		obj.ctx.globalCompositeOperation = comp;
	}

	obj.ctx.fill();
};

/*========================================
Loop
========================================*/

obj.loop = function () {
	requestAnimationFrame(obj.loop);

	obj.ctx.clearRect(0, 0, obj.w, obj.h);
	obj.xoff = 0;

	// obj.ctx.fillStyle = "#182645";
	// obj.ctx.fillStyle = '#ea0100'
	obj.ctx.fillStyle = '#de1e1e'
	// obj.ctx.fillStyle = 'rgba(222, 30, 30, 1)'
	obj.ctx.fillRect(0, 0, obj.w, obj.h);

	// obj.wave("#fb0000", 20, obj.h * .5, "screen");
	// obj.wave("#00ff8e", 20, obj.h * .5, "screen");
	// obj.wave("#6F33FF", 20, obj.h * .5, "screen");

	obj.wave("rgba(222, 30, 30, 0.6)", 30, obj.h * .17, "screen")
	obj.wave("rgba(222, 30, 30, 1)", 20, obj.h * .14, "screen")
	obj.wave("rgba(222, 30, 30, 0.9)", 30, obj.h * .15, "screen")
	

	obj.ctx.fillStyle = "rgba(222, 30, 30, 0.4)";

	obj.ctx.globalCompositeOperation = "darken";

	obj.ctx.fillRect(0, 0, obj.w, obj.h);

	obj.yoff += obj.yinc;
	obj.goff += obj.ginc;
};

/*========================================
Start
========================================*/

obj.init();